<template>
	<div class="leftcomtsdiv commdiv">
		<!-- 左上 -->
		<div class="lt_top">
			<div class="comtitle">接入资源概况</div>
			<div class="lt_top2 comtitlejiao">
				<div class="lt_top2indiv">
					<div class="lt_top2ones">
						<img src="/@/assets/images/jsc/jsclt0.png" alt="" />
						<div class="lt_top2ones_rt">
							<span class="span1">接入充电站</span>
							<span class="span2">{{ assetsCountData.stationNum }}</span>
						</div>
					</div>
					<div class="lt_top2ones">
						<img src="/@/assets/images/jsc/jsclt1.png" alt="" />
						<div class="lt_top2ones_rt">
							<span class="span1">总装机容量(万千瓦)</span>
							<span class="span2">{{ assetsCountData.totalCapacity }}</span>
						</div>
					</div>
					<div class="lt_top2ones">
						<img src="/@/assets/images/jsc/jsclt2.png" alt="" />
						<div class="lt_top2ones_rt">
							<span class="span1">直流设备数</span>
							<span class="span2">{{ assetsCountData.dcNum }}</span>
						</div>
					</div>
					<div class="lt_top2ones">
						<img src="/@/assets/images/jsc/jsclt2.png" alt="" />
						<div class="lt_top2ones_rt">
							<span class="span1">交流设备数</span>
							<span class="span2">{{ assetsCountData.acNum }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 左中 -->
		<div class="lt_center">
			<div class="comtitle">城市接入站点统计</div>
			<div class="lt_centers comtitlejiao">
				<div class="lt_centersTitle">
					<span :class="{ selectname: topselectdata == '15' }" @click="topselectfunt('15')">TOP1 - 5</span>
					<span :class="{ selectname: topselectdata == '610' }" @click="topselectfunt('610')">TOP6 - 10</span>
				</div>
				<div class="lt_center_top15 lt_centercom">
					<div v-if="topselectdata == '15'" class="lt_center_topones"
						v-for="(item, index) in cityStationList.cityStationList1" :key="index">
						<div class="lt_center_topones_top">
							<div class="lt_center_topones_top_lt">
								<span class="circle"></span> <span>TOP{{ index + 1 }}.{{ item.cityName }}</span>
							</div>
							<div class="lt_center_topones_top_rt">
								<span>{{ item.stationNum }}</span>
							</div>
						</div>
						<div class="lt_center_topones_botm">
							<a-progress :stroke-color="{ from: 'rgb(15, 59, 170)', to: 'rgb(117, 186, 240)' }"
								:percent="item.stationNum" style="width: 100%" />
						</div>
					</div>
					<div v-if="topselectdata == '610'" class="lt_center_topones"
						v-for="(item, index) in cityStationList.cityStationList2" :key="index">
						<div class="lt_center_topones_top">
							<div class="lt_center_topones_top_lt">
								<span class="circle"></span> <span>TOP{{ index + 6 }}.{{ item.cityName }}</span>
							</div>
							<div class="lt_center_topones_top_rt">
								<span>{{ item.stationNum }}</span>
							</div>
						</div>
						<div class="lt_center_topones_botm">
							<a-progress :stroke-color="{ from: 'rgb(15, 59, 170)', to: 'rgb(117, 186, 240)' }"
								:percent="item.stationNum" style="width: 100%" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 左下 -->
		<div class="lt_bottom">
			<div class="comtitle">充电偏好分析</div>
			<div class="lt_btm_main comtitlejiao">
				<div class="lt_btm_tab">
					<span :class="{ selectname2: typetime == 0 }" @click="typetimefunt(0)"> 充电时长分布</span>
					<span :class="{ selectname2: typetime == 1 }" @click="typetimefunt(1)">起始SOC分布</span>
				</div>
				<div class="ltBM_main">
					<div class="ltBMM_left">
						<div class="echartsdiv">
							<div class="lineecharts" style="width: 100%;">
								<ChargeTime v-if="typetime == 0" :chartData="chargeTimeDatachargeTimes"
									height="280px" />
								<ChargeTime v-if="typetime == 1" :chartData="chargeTimeDatachargeSoc" height="280px" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="js">
// import { defineComponent, unref, computed, ref, onMounted, toRaw } from 'vue';
// import {getassetsCount, getassetsCity, gettitleData, getchargePreference} from '@/api/screen/yewuapi.js';
import ChargeTime from './ChargeTime.vue';
export default {
	name: 'leftcomts',
	props: {
		leftdata: {
			type: String,
			default: '',
		},
	},
	components: { ChargeTime },
	data() {
		return {
			chargeTimeData: [],

			typetime: 0,
			barData: [],
			percentNum: 79,
			myCharts1: null,
			color: ['#8bc353', '#e09f31', '#30e8bb', '#FFDC4C', '#46a6ff'],
			chargeTimeDatachargeTimes: [
				{ name: '>3h', value: 4 },
				{ name: '1.5h~3h', value: 23 },
				{ name: '1h~1.5h', value: 34 },
				{ name: '0.5h~1h', value: 47 },
				{ name: '<0.5h', value: 62 },
			],
			chargeTimeDatachargeSoc: [
				{ name: '>50%', value: 62 },
				{ name: '30-50%', value: 34 },
				{ name: '15-30%', value: 23 },
				{ name: '10-15%', value: 4 },
				{ name: '<10%', value: 47 },
			],
			echartsValue: {},
			assetsCountData: {},
			cityStationList: {
				cityStationList1: [],
				cityStationList2: [],
			},
			topselectdata: '15',
		};
	},

	created() { },
	mounted() { },
	watch: {
		leftdata: {
			deep: true,
			immediate: true,
			handler(newVal, oldVal) {
				console.log('leftdataleftdata', newVal, oldVal);
				this.alldataMethods(newVal);
			},
		},
	},
	methods: {
		typetimefunt(num) {
			this.typetime = num;
			// if (num == 0) {
			// 	this.chargeTimeData = this.chargeTimeDatachargeTimes;
			// } else {
			// 	this.chargeTimeData = this.chargeTimeDatachargeSoc;
			// }
		},
		alldataMethods(newVal) {
			console.log('alldataMethods', newVal);
			this.$nextTick(() => {
				// 充电偏好
				newVal.chargePreferenceVO.chargeTimes.forEach((item, index) => {
					this.chargeTimeDatachargeTimes[index].name = item.regin;
					this.chargeTimeDatachargeTimes[index].value = item.num;
				});

				newVal.chargePreferenceVO.chargeSoc.forEach((item, index) => {
					this.chargeTimeDatachargeSoc[index].name = item.regin;
					this.chargeTimeDatachargeSoc[index].value = item.num;
				});
				this.chargeTimeData = this.chargeTimeDatachargeTimes;
				// 接入资源概况
				this.assetsCountData = newVal.assetsCountVO;
				// 城市充电站情况
				// 截取前五个元素
				this.cityStationList.cityStationList1 = newVal.allCityVO.cityStationList.slice(0, 5);
				// 截取第六到第十个元素
				if (newVal.allCityVO.cityStationList.length >= 6) {
					this.cityStationList.cityStationList2 = newVal.allCityVO.cityStationList.slice(5, 10);
				}
			});
		},

		topselectfunt(type) {
			this.topselectdata = type;
			if (type == '15') {
			} else if (type == '610') {
			}
		},

		initEcharts(echartsValue) {
			let xAxis_data = [];
			let series_data = [];
			var that = this;
			this.myCharts1 = that.$echarts.init(document.getElementById('ltbotltecharts'));
			let max = Math.max(...this.echartsdata.map((item) => item.value));
			let sum = eval(this.echartsdata.map((item) => item.value).join('+'));
			// 绘制图表
			let option = {
				backgroundColor: '#0c182d',
				grid: {
					top: '1px',
					bottom: '15%', //也可设置left和right设置距离来控制图表的大小
					left: '1px',
					right: '1px',
				},
				angleAxis: {
					show: false,
					clockwise: true,
					max: max + max / 3,
				},
				radiusAxis: {
					type: 'category',
					data: that.echartsdata.map((item) => {
						// return item.name + ':' + '(' + (item.value / sum * 100).toFixed(1) + '%)'
						return item.name;
					}),
					z: 10,
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						interval: false,
						color: '#fff',
						align: 'right',
						margin: 10,
					},
				},
				polar: {
					show: false,
					center: ['50%', '40%'],
				},
				series: [
					{
						type: 'bar',
						data: that.echartsdata.map((item, index) => {
							return {
								value: item.value,
								name: item.name,
								itemStyle: {
									color: this.color[index],
								},
							};
						}),
						label: {
							show: false,
							position: 'top',
						},
						barWidth: 10,
						coordinateSystem: 'polar',
					},
				],
			};
			this.myCharts1.setOption(option);
			this.myCharts1.resize();
		},
	},
};
</script>

<style lang="less" scoped>
@import '/@/assets/css/baseinit.css';

:deep(.ant-progress-inner) {
	background-color: rgb(32, 57, 105);
}

:deep(.ant-progress-show-info .ant-progress-outer) {
	padding-right: calc(0em);
}

:deep(.ant-progress-line) {
	margin-bottom: 0px !important;
}

.leftcomtsdiv {
	// width: 388rem;
	min-width: 355px;
	overflow: hidden;
	display: flex;
	height: calc(100% - 36px);
	flex-direction: column;
	justify-content: space-between;

	.lt_top {
		// height: 305px;
	}

	// 左上
	.lt_top2 {
		.lt_top2indiv {
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;
			justify-content: space-around;
			// margin: 20px 0px;
			padding-top: 35px;
			margin-top: 0px;
		}

		.lt_top2ones {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 35px;

			img {
				width: 67px;
				height: 69px;
			}

			.span1 {
				font-size: 18px;
				font-weight: 700;
				color: #0465b8;
				display: block;
				white-swwsvvvvpace: nowrap;
			}

			.span2 {
				font-weight: 700;
				font-style: normal;
				width: 76px;
				max-width: 124px;
				text-align: center;
				font-size: 20px;
			}
		}

		.lt_top2ones_rt {
			color: white;
			width: 124px;
			margin-left: 5px;
		}
	}

	// 左中
	.selectname {
		background-image: url(@/assets/images/jsc/u135.svg);
		background-size: 100% 100%;
	}

	.selectname2 {
		background-image: url(@/assets/images/jsc/u135.svg);
		background-size: 111% 100%;
	}

	.lt_center {
		// height: 370px;
		// margin-top: 10px;

		.lt_centersTitle {
			display: flex;
			justify-content: end;
			margin-top: 7px;

			span {
				cursor: pointer;
				margin-right: 15px;
				font-weight: 600;
				font-style: normal;
				color: rgb(70, 166, 255);
				font-size: 14px;
				background-size: 100% 100%;
				width: 74px;
				height: 16px;
				line-height: 16px;
				text-align: center;
			}
		}

		.lt_centercom {
			font-size: 14px;
			padding-bottom: 7px;
			padding-left: 11px;
			min-height: 290px;

			.lt_center_topones {
				margin-top: 11px;

				.lt_center_topones_top {
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 0 10px;
					padding-left: 0px;

					.lt_center_topones_top_lt {
						color: white;
						display: flex;
						align-items: center;
						font-size: 16px;

						.circle {
							width: 6px;
							height: 6px;
							background-color: rgba(57, 134, 248, 1);
							border-radius: 100%;
							display: inline-block;
							margin-right: 5px;
						}
					}

					.lt_center_topones_top_rt {
						color: rgb(117, 193, 229);
					}
				}

				.lt_center_topones_botm {
					width: 100%;
					line-height: 1;
					// background: linear-gradient(90deg, rgb(15, 59, 170) 0%, rgb(117, 186, 240) 100%);
				}
			}
		}
	}

	// 左下
	.lt_bottom {
		// margin-top: 20px;
		height: 310px;

		.lt_btm_main {
			margin-top: 10px;

			.lt_btm_tab {
				display: flex;
				justify-content: end;
				padding-top: 16px;

				span {
					font-weight: 600;
					font-style: normal;
					color: rgb(70, 166, 255);
					font-size: 16px;
					margin-right: 14px;
					cursor: pointer;
					// width: 100px;
					padding-left: 8px;
				}
			}

			.ltBM_main {
				margin-top: 7px;
				display: flex;
				justify-content: center;
				box-sizing: border-box;
				padding-left: 2px;
				padding-bottom: 2px;

				.ltBMM_left {
					font-size: 12px;
				}

				.ltBMM_right {
					width: 180px;
					margin-right: 17px;

					.ltBMM_right_ones {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-bottom: 10px;

						span:nth-of-type(1) {
							width: 6px;
							height: 6px;
							background-color: #46a6ff;
						}

						span:nth-of-type(2) {
							font-weight: 300;
							font-style: normal;
							font-size: 13px;
							color: rgb(125, 133, 144);
						}

						span:nth-of-type(3) {
							font-weight: 400;
							font-style: normal;
							font-size: 18px;
							color: rgb(255, 255, 255);
						}

						span:nth-of-type(4) {
							font-weight: 400;
							font-style: normal;
							font-size: 13px;
							color: rgb(125, 133, 144);
						}
					}
				}
			}
		}
	}
}
</style>
